<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">

	*{ padding: 0px; margin: 0px;}
	
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script type="text/javascript">
	
	$( document ).ready( function(){
		var $video = $( ".video" );
		var video = $( ".video" )[0];
		var $canvas = $( ".video_canvas" );
		var canvas = $canvas[0];
		var context = canvas.getContext( "2d" );
		var intervalId;
		
		$video.on( "play", function(){
			console.log( "play" );
			intervalId = setInterval( drawVideo, 10 );
		});
		
		$video.on( "ended", function(){
			console.log( "ended" );
			clearInterval( intervalId );
		})
		
		function drawVideo(){
			if( video.paused == "false") return;
			context.drawImage( video, 0 , 0, 320, 175, 0, 0, 720, 575);			
		}
	});
</script>
</head>
<body>
<canvas class="video_canvas" width="720" height="575"></canvas>
<video class="video" autoplay controls>
	<source src="assets/mov.mp4" type="video/mp4"></source>
	<source src="assets/mov.ogg" type="video/ogg"></source>
</video>
</body>
</html>